<template>
  <!-- 编辑题库密码 -->
  <el-dialog :visible.sync="localVisible" :title="title" width="500px" @close="handleClose"
    :close-on-click-modal="false" append-to-body>
    <el-form label-width="120px" :model="classRow" ref="addObject">

      <el-form-item label="所属班级" prop="fk_t_customer_class_id">

        <el-select v-model="classRow.fk_t_customer_class_id" placeholder="请选择" size="mini" style="width: 300px">
          <el-option label="无" :value="0"></el-option>
          <el-option v-for="item in customerClassList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="btnOk">确定</el-button>
        <el-button size="mini" @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { updateSctkClass } from '@/api/sctk'
import { getCustomerClassList } from '@/api/customerClass';
export default {
  name: 'updateSctkCustomerClass',
  props: {
    showDialog: {
      type: Boolean,
      default: false,
      required: true
    },
    title: {
      type: String,
      default: '编辑密码'
    },
    fk_t_sctk_id: {
      type: Number,
      required: true
    },
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      localVisible: this.showDialog,
      rules: [],
      classRow: {
        fk_t_customer_class_id: 0
      },
      customerClassList: []
    };
  },
  watch: {
    showDialog(newVal) {
      this.localVisible = newVal;
      if (newVal) {
        this.getClassList();
      }
    },
    row: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.classRow = {
          fk_t_customer_class_id: newVal?.fk_t_customer_class_id || null
        }
      }
    },
    localVisible(newVal) {
      if (newVal !== this.showDialog) {
        this.$emit('update:showDialog', newVal);
      }
    }
  },
  mounted() {
    if (this.showDialog) {
      this.getClassList();
    }
  },
  methods: {
    // 获取班级信息
    async getClassList() {
      const { data } = await getCustomerClassList()
      // 转换逻辑
      const classList = data.map(item => ({
        value: item.id, // 将 id 映射为 value
        label: item.name // 将 name 映射为 label
      }));
      this.customerClassList = classList
    },
    btnOk() {
      this.$refs.addObject.validate(async isOk => {
        if (isOk) {

          await updateSctkClass({ ...this.classRow, id: this.fk_t_sctk_id })
          // 通知父组件更新
          this.$emit('submit')
          //成功提示
          this.$message.success(`设置成功`)
          //重置表单
          this.handleClose()
        }
      })
    },
    handleClose() {
      this.localVisible = false;
    },
  }
};
</script>

<style scoped></style>